
<template>
     <Account>
        <template v-slot:header>
            <NavBar :title="$t('footer.FAQ')"/>
        </template>
        <div class="faq">
            <p class="faq_title">{{$t('account.topQuestions')}}</p>
            <ul class="faq_list">
                <li class="faq_list_item" v-for="(item,index) in listData" :key="index">
                    <div class="faq_list_item_head l-f" @click="onChange(index)">
                        <p class="faq_list_item_head_title l-f1">{{item.title}}</p>
                        <div class="faq_list_item_head_more" :class="currentIndex === index ? 'faq_list_item_head_more-active' : ''"></div>
                    </div>
                    <div class="faq_list_item_content" :class="currentIndex === index ? 'faq_list_item_content-active' : ''" v-html="item.content"></div>
                </li>
            </ul>
        </div>
    </Account>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { getNewListApi } from '@/api/indexApi.js'
import { useMainStore } from '@/store'

import Account from '@/views/account/index.vue'
import NavBar from '@/components/navBar/index.vue'

const mainStore = useMainStore()

const currentIndex = ref(null)

const listData = ref([])

watch(
    () => mainStore.lang,
    (val) => {
        console.log(val)
       getNewList()
    }
)

onMounted(() => {
    getNewList()
})

const onChange = (index) => {
    if(currentIndex.value === index) {
        currentIndex.value = null
    }else {
        currentIndex.value = index
    }
}

// 获取资讯列表
const getNewList = async () => {
    const res = await getNewListApi({
        c_id: 28,
        page: 1
    })
    listData.value = res.list
}

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>